<template>
    <div class="pos-body">
        <div class="pos-col pos-col-left">
            <div class="searchbar">
                <div class="col-logo">
                    <img src="https://noodlebox.ie/wp-content/uploads/2019/03/noodlebox-2.png" alt="">
                </div>
                <div class="col-input">
                    <auto-complete @select="addProduct"/>
                </div>
                <div class="col-calculator">
                    <div class="calculator">
                        <i class="yith-pos-icon-calculator"></i>
                    </div>
                </div>
            </div>
            <div class="tabs">
                <div
                        class="tab-item"
                        v-for="(tab,index) in tabs"
                        :key="index"
                        :class="{'tab-active':index===tabIndex}"
                        @click="tab.click"
                >
                    <i :class="tab.icon" v-if="tab.icon"></i>
                    <span>{{ tab.name }}</span>
                </div>
            </div>

            <div class="tab-panel">
                <product-categories @select="addProduct" key="product-categories" v-if="tabIndex===0"/>
                <product-list @select="addProduct" key="products" v-if="tabIndex===1"/>
                <product-list :params="{featured: true}" key="products-featured" @select="addProduct"
                              v-if="tabIndex===2"/>
                <div class="empty-box" v-if="tabIndex===4"></div>
            </div>
        </div>
        <div class="pos-col pos-cart">
            <div class="cart-buttons">
                <div class="nav-item active">
                    <i class="yith-pos-icon-cart"></i>
                    <span>Cart</span>
                </div>
                <div class="gzdsx-pos-dropdown">
                    <div class="nav-item">
                        <i class="yith-pos-icon-customer"></i>
                        <span v-if="customer.id">{{ customer.first_name }} {{ customer.last_name }}</span>
                        <span v-else>Customer Guest</span>
                    </div>
                    <div class="dropdown-menu">
                        <div class="dropdown-menu__item" @click="removeCustomer">
                            <i class="yith-pos-icon-guest-user"></i>
                            <span>Proceed as guest</span>
                        </div>
                        <div class="dropdown-menu__item" @click="showCustomerDialog=true">
                            <i class="yith-pos-icon-customer"></i>
                            <span>Load a customer profile</span>
                        </div>
                        <div class="dropdown-menu__item" @click="showCreateCustomer=true">
                            <i class="yith-pos-icon-create-user"></i>
                            <span>Create new customer profile</span>
                        </div>
                    </div>
                </div>

                <div class="nav-item" @click="showShippingAddress=true">
                    <i class="yith-pos-icon-location"></i>
                    <span>Address</span>
                </div>
                <div class="nav-item nav-item--save--carts disabled">
                    <i class="yith-pos-icon-saved-cart"></i>
                </div>
            </div>

            <div class="cart-items" v-if="order.line_items.length">
                <div class="cart-item" v-for="(item,index) in order.line_items" :key="index">
                    <div class="cart-item__row">
                        <div class="cart-item__remove" @click="order.line_items.splice(index,1)">
                            <i class="yith-pos-icon-clear"></i>
                        </div>
                        <img :src="$imageSrc(item.image.src)" alt="" class="cart-item__image">
                        <div class="cart-item__name">
                            <div class="cart-item__name__title">{{ item.name }}</div>
                        </div>
                        <div class="cart-item__qty">
                            <number-control v-model="item.quantity"/>
                        </div>
                        <div class="cart-item__price">€{{ item.price }}</div>
                        <div class="cart-item__total">€{{ item.getTotal().toFixed(2) }}</div>
                    </div>
                </div>
            </div>
            <div class="cart-items empty-cart" v-else>
                <div class="cart-empty-box">
                    <div class="cart-empty-svg"></div>
                    <span>Add the first product to the cart</span>
                </div>
            </div>
            <div class="cart-totals">
                <div class="cart-total cart-total-subtotal">
                    <div class="cart-total__label">Subtotal</div>
                    <div class="cart-total__price">€{{ subTotal }}</div>
                </div>
                <div class="cart-total" v-for="(f,idx) in order.fee_lines" :key="'f'+idx">
                    <div class="cart-total__remove" @click="order.fee_lines.splice(idx,1)">
                        <i class="yith-pos-icon-clear"></i>
                    </div>
                    <div class="cart-total__label">Fee - {{ f.name }}</div>
                    <div class="cart-total__price text-red">€{{ $toAmount(f.total) }}</div>
                </div>
                <div class="cart-total" v-for="(s,idx) in order.shipping_lines" :key="'s'+idx">
                    <div class="cart-total__remove" @click="order.shipping_lines.splice(idx,1)">
                        <i class="yith-pos-icon-clear"></i>
                    </div>
                    <div class="cart-total__label">Shipping - {{ s.method_title }}</div>
                    <div class="cart-total__price">€{{ $toAmount(s.total) }}</div>
                </div>
                <div class="cart-total cart-total-total ">
                    <div class="cart-total__label">Total</div>
                    <div class="cart-total__price">€{{ total }}</div>
                </div>
            </div>
            <div class="order-notes order-editable cursor-pointer" @click="showNote=true"
                 v-if="order.customer_note.length">
                <h5 class="text-uppercase">Note</h5>
                <p>{{ order.customer_note }}</p>
            </div>
            <div class="cart-empty-carts" v-if="order.line_items.length">
                <div class="cart-empty-carts__flex"></div>
                <div class="cart-empty-carts__btn" @click="emptyCart">&times; Empty Cart</div>
            </div>
            <div class="cart-actions">
                <div class="cart-action cart-action--add-note" @click="showNote=true">
                    <i class="yith-pos-icon-item-note"></i>
                    <span>Add Note</span>
                </div>
                <div class="cart-action" @click="showFee=true">
                    <i class="yith-pos-icon-add"></i>
                    <span>Add Fee</span>
                </div>
                <div class="cart-action" @click="saveCart">
                    <i class="yith-pos-icon-gift-card"></i>
                    <span>Apply coupon</span>
                </div>
                <button class="cart-action" @click="showShipping=true">
                    <i class="yith-pos-icon-shipping"></i>
                    <span>Shipping</span>
                </button>
                <button class="cart-action cart-action--suspend" :disabled="disbaled" @click="saveCart">
                    <i class="yith-pos-icon-saved-cart"></i>
                    <span>Suspend & save cart</span>
                </button>
                <button class="cart-action cart-action--pay" :disabled="disbaled" @click="showPayment=true">
                    <span>Pay</span>
                </button>
            </div>
        </div>

        <load-customer @submit="addCustomer" @remove="removeCustomer" @create="showCreateCustomer=true"
                       v-model="showCustomerDialog"/>
        <create-customer @submit="onBillingChange" @created="customerCreated" v-model="showCreateCustomer"/>
        <create-shipping-address :default-address="order.shipping" @submit="onShippingChange"
                                 v-model="showShippingAddress"/>
        <dialog-payment
                :order.sync="order"
                :total="total"
                :sub-total="subTotal"
                @success="onOrderCreated"
                v-model="showPayment"
        />
        <dialog-order :order.sync="newOrder" v-model="showOrder"/>
        <dialog-shipping @submit="addShipping" v-model="showShipping"/>
        <dialog-fee @submit="addFee" v-model="showFee"/>
        <dialog-note @submit="addNote" v-model="showNote"/>
        <dialog-customer-info @submit="addCustomer" :customer="newCustomer" v-model="showCustomerInfo"/>
    </div>
</template>

<script>
import Navigation from "./Navigation.vue";
import NumberControl from "./NumberControl.vue";
import Calculator from "./Calculator.vue";
import CalculatorContent from "./CalculatorContent.vue";
import AutoComplete from "./AutoComplete.vue";
import LoadCustomer from "./LoadCustomer.vue";
import CreateCustomer from "./CreateCustomer.vue";
import CreateShippingAddress from "./CreateShippingAddress.vue";
import DialogPayment from "./DialogPayment.vue";
import DialogOrder from "./DialogOrder.vue";
import DialogShipping from "./DialogShipping.vue";
import DialogFee from "./DialogFee.vue";
import DialogNote from "./DialogNote.vue";
import DialogCustomerInfo from "./DialogCustomerInfo.vue";
import ProductList from "./ProductList.vue";
import ProductCategories from "./ProductCategories.vue";

export default {
    name: "PosApp",
    components: {
        ProductCategories,
        ProductList,
        DialogCustomerInfo,
        DialogNote,
        DialogFee,
        DialogShipping,
        DialogOrder,
        DialogPayment,
        CreateShippingAddress,
        CreateCustomer,
        LoadCustomer,
        AutoComplete,
        NumberControl,
        Navigation,
        Calculator,
        CalculatorContent
    },
    data() {
        return {
            tabs: [],
            tabIndex: 0,
            categories: [],
            loading: true,
            loadingMore: true,
            order: {},
            newOrder: {},
            customer: {},
            newCustomer: {},
            showCustomerDialog: false,
            showCreateCustomer: false,
            showShippingAddress: false,
            showPayment: false,
            showLoading: false,
            showOrder: false,
            showShipping: false,
            showFee: false,
            showNote: false,
            showCustomerDropdown: false,
            showCustomerInfo: false
        }
    },
    computed: {
        subTotal() {
            return this.order.line_items.reduce((a, b) => {
                return a + b.getTotal();
            }, 0).toFixed(2);
        },
        total() {
            let total = this.order.line_items.reduce((a, b) => {
                return a + b.getTotal();
            }, 0);

            total += this.order.fee_lines.reduce((a, b) => {
                return a + parseInt(b.total);
            }, 0);

            total += this.order.shipping_lines.reduce((a, b) => {
                return a + parseInt(b.total);
            }, 0);

            return total.toFixed(2);
        },
        disbaled() {
            return this.order.line_items.length === 0;
        }
    },
    methods: {
        addProduct(p) {
            if (this.$beep) {
                this.$beep.play();
            }

            const item = this.makeCartItem(p);
            const i = this.order.line_items.indexOf(item);
            if (i === -1) {
                this.order.line_items.push(item);
            } else {
                this.order.line_items[i].quantity++;
            }
        },
        addCustomer(c) {
            this.order.customer_id = c.id;
            this.customer = c;
        },
        removeCustomer() {
            this.order.customer_id = 0;
            this.customer = {};
        },
        customerCreated(c) {
            this.newCustomer = c;
            this.showCustomerInfo = true;
        },
        onBillingChange(billing) {
            this.order.billing = billing;
        },
        onShippingChange(shipping) {
            this.order.shipping = shipping;
        },
        addShipping(s) {
            this.order.shipping_lines.push(s);
        },
        addFee(f) {
            this.order.fee_lines.push(f);
        },
        addNote(c) {
            this.order.customer_note = c;
        },
        onOrderCreated(newOrder) {
            this.newOrder = newOrder;
            this.showOrder = true;
            this.resetCart();
        },
        emptyCart() {
            this.order.line_items = [];
        },
        saveCart() {
        },
        printOrder() {
            const iframe = document.createElement('iframe');
            const f = document.body.appendChild(iframe);
            const w = f.contentWindow || f.contentDocument;
            const d = f.contentDocument || f.contentWindow.document;

            d.body.innerHTML = 'Content';
            w.print();
            document.body.removeChild(iframe);
        },
        makeCartItem(p) {
            const item = {
                product_id: p.id,
                name: p.name,
                price: p.price,
                image: p.images[0] || {},
                quantity: 1
            }

            item.getSubtotal = function () {
                return parseFloat(item.price) * parseInt(item.quantity);
            }

            item.getTotal = function () {
                return parseFloat(item.price) * parseInt(item.quantity);
            }

            return item;
        },
        resetCart(){
            this.order = {
                customer_id: 0,
                customer_note: '',
                payment_method: "yith_pos_cash_gateway",
                payment_method_title: "Cash",
                set_paid: true,
                line_items: [],
                billing: {},
                shipping: {},
                shipping_lines: [],
                fee_lines: [],
            };
        }
    },
    created() {
        const that = this;
        this.tabs = [
            {
                name: 'All',
                icon: null,
                click() {
                    that.tabIndex = 0;
                }
            },
            {
                name: 'On sale',
                icon: null,
                click() {
                    that.tabIndex = 1;
                }
            },
            {
                name: 'Featured',
                icon: null,
                click() {
                    that.tabIndex = 2;
                }
            },
            {
                name: 'Add Product',
                icon: 'yith-pos-icon-add',
                click() {

                }
            },
            {
                name: 'Scan product',
                icon: 'yith-pos-icon-barcode',
                click() {
                    that.tabIndex = 4;
                }
            }
        ];
        this.resetCart();
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>